<!-- 轮播图 -->
<template>
  <div class="swiper">
    <el-carousel height="180px" :autoplay="true" arrow="never">
      <el-carousel-item v-for="(item,index) in banners" :key="index">
        <a :href="item.link"><img class="banner-item" :src="item.image" alt="item.title" @load="imageload"></a>
      </el-carousel-item>
    </el-carousel>
  </div>
  
</template>
<script>
export default {
  //import引入的组件需要注入到对象中才能使用
  name:"homeswiper",
  props: {
    banners:{
      type: Array,
      default: function () {
        return []
      }
    }
  },
  data () {
    return {
      isLoad: false
    }
  },
  methods: {
    imageload(){
      if (!this.isLoad) {
        this.$emit('swiperImageLoad');
        this.isLoad = true;
      }
    }
  }
}
</script>
<style scoped>

.banner-item{
    width: 100%;
    height: 100%;
}
/* 改走马灯的指示器样式 */
::v-deep .el-carousel__button {
    border: 1px solid gray;
    width: 0.5rem;
    height: 0.5rem;
    border-radius: 50%;
}
::v-deep .el-carousel__indicators--horizontal {
    bottom: 0.625rem;
}
</style>